<template>
	<view class="my_Pets">

		<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="0"  @click="toDetails">
			<view id="demo1" v-for="item in dataval" class="scroll-view-item_H ">
				<view class="pets_content ">
					<image class="pets_logo" :src="item.img"></image>
					<view class="text_transparent">
						<text class="pets_text">{{item.text}}</text>
						<text class="pets_name">{{item.name}}</text>
            <text class="pets_people">累计{{item.people}}人已阅读</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	export default {
		props: {
			dataval: {
				type: Array,
				default: []
			}
		},
		components: {},
		data() {
			return {

				scrollTop: 0,
				old: {
					scrollTop: 0
				}

			}
		},
		methods: {
			scroll: function(e) {
				// this.old.scrollTop = e.detail.scrollTop
			},
			toDetails(){
				console.log(154)
				uni.navigateTo({
					url: 'article',
				});
			},
		},
		watch: {},

		onReachBottom() { //页面上拉触底事件的处理函数

		},
		onPullDownRefresh() { //监听用户下拉动作，一般用于下拉刷新
			//需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh
			//uni.startPullDownRefresh(); 开启
			// uni.stopPullDownRefresh(); 关闭
		},
		onUnload() { //监听页面卸载

		},
		onHide() { //监听页面隐藏

		},
		onLoad() { // 替代 created 监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例

		},
		onReady() { //替代 mounted 监听页面初次渲染完成

		},

		onShow() { //监听页面显示

		}
	}
</script>
<style lang="scss" scoped>
	.scroll-Y {
		height: 300upx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		height: 130px
	}

	.scroll-view-item {
		height: 310upx;
		line-height: 300upx;
		text-align: center;
		font-size: 36upx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 70%;

		line-height: 300upx;
		// text-align: center;
		font-size: 36upx;
	}

	.home {
		width: 100%;
		height: 100%;
	}

	.scroll-view_H {}

	.my_Pets {
		height: 150px;
		width: 100%;
	}

	.scroll-view-item_H::-webkit-scrollbar {
		/*隐藏滚轮*/
		display: none;
	}

	.pets_content {
		width: 95%;
		height: 130px;
		background: linear-gradient(to right, #2d98ec 0%, #097cdb 59%, #1c7ccf 100%, #0073f8 100%);
		border-radius: 8px;
		position: relative;
    align-items: center;
		.pets_logo {
			background-size: 100% 100%;
			width: 100%;
			height: 130px;
			border-radius: 8px;
			position: relative;

		}

		.text_transparent {
			position: absolute;
			top: 0;
			background-color: rgba(30, 30, 30, 0.36);
			width: 100%;
			height: 100%;
			border-radius: 8px;

			.pets_text {
				width: 90%;
				height: 30px;
				text-indent: 15upx;
				margin: auto;
				color: #f2f2f2;
				display: block;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-top: 20px;
			}

			.pets_name {
				width: 90%;
				height: 30px;
				text-indent: 15upx;
				margin: auto;
				color: #f2f2f2;
				display: block;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-top: 7px;
				font-size: 10px
			}
			.pets_people{
							width: 90%;
				height: 30px;
				text-indent: 15upx;
				margin: auto;
				color: #f2f2f2;
				display: block;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-top: 16px;
				font-size: 10px
			}
		}

	}
</style>
